<template>
  <div class="container">
        <div slot="tip" class="el-upload__tip red" v-if="!disabled">
        只能上传jpg/png文件，且不超过5M
      </div>
    <el-upload
      :action="$upload"
      :disabled="disabled"
      :headers="$headers()"
      :on-exceed="handleExceed"
      accept="image/png,image/jpeg"
      :multiple="limit > 1"
      :limit="limit"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-success="onSuccess"
      :on-remove="onRemove"
      :before-remove="beforeRemove"
      :file-list="list"
      :class="{ hide: disabled || hideUpload }"
      :before-upload="
        (e) => {
          return $beforeAvatarUpload(e);
        }
      "
    >
  
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- <el-dialog :visible.sync="dialogVisible"  append-to-body width="30%">
     <div style="text-align:center"> 
       <el-image 
    style="height: 300px"
    :src="dialogImageUrl" >
  </el-image>
     
     
     
     </div>
    </el-dialog> -->

    <el-image-viewer
    :z-index="4000"
      v-if="dialogVisible"
      :on-close="close"
      :url-list="[dialogImageUrl]"
    />
  </div>
</template>
<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer.vue";
export default {
  // props:[],
  props: {
    fileList: {
      type: Array,
    },
    limit: {
      type: Number,
      default: 9,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    prop: "fileList",
    // 随便命名事件，对应下面$emit即可
    event: "changeFileList",
  },
  // 页面加载
  created() {
    this.list = this.$_.cloneDeep(this.fileList);
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},

  //实例销毁后
  destroyed() {},
  data() {
    return {
      list: [],
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  // 方法
  methods: {
    updateVal(val) {
      this.$emit("changeFileList", val);
    },
    onSuccess(e, a) {
      if (e.code !== 200) this.$error(e.msg);
      this.fileList.push({
        url: this.$uploadURL + e.data,
        fileUrl: this.$uploadURL + e.data,
        sampleImageName: "图片",
        sampleImageUrl: this.$uploadURL + e.data,
        uid: a.uid,
      });
      this.updateVal(this.fileList);
    },
    beforeRemove(file) {
        if(file && file.status==="success"){
      return this.$confirm("确认删除图片吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
        }
    },
    onRemove(e) {
      this.fileList.splice(
        this.fileList.findIndex((x) => x.uid == e.uid),
      );
      this.updateVal(this.fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit} 个图片，本次选择了 ${
          files.length
        } 个图片，共选择了 ${files.length + fileList.length} 个图片`
      );
    },
    close() {
      this.dialogVisible = false;
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    ElImageViewer,
  },
  // 计算属性
  computed: {
    hideUpload() {
      return this.fileList.length >= this.limit;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  /deep/.hide .el-upload--picture-card {
    display: none;
  }
  // /deep/ .el-image-viewer__wrapper {
  //   z-index: 2010 !important;
  // }
}
</style>